<template>
	<div class="wraper" :class="{status1:pageState===1,status2:pageState===2,status3:pageState===3,'theme-dark':themeIndex==1}">
		<div class="line"></div>
		<div class="nav-bar" :class="{iphoneX:isIphoneX,iphone:isIphone}">
			<div class="arrow" @click="goBack"></div>
			<div class="title">
				<!-- 交易明细 -->
				<span v-if="pageState===1">{{showDate}}{{$t('inviteDetail01')}}</span>
				<!-- 入金明细 -->
				<span v-if="pageState===2">{{showDate}}{{$t('inviteDetail02')}}</span>
				<!-- 出金明细 -->
				<span v-if="pageState===3">{{showDate}}{{$t('inviteDetail03')}}</span>
			</div>
			<div class="right"></div>
		</div>
		<div class="tab" :class="{iphoneX:isIphoneX,iphone:isIphone}">
			<ul class="main" v-if="pageState===1">
				<!-- 账户UID -->
				<li>{{$t('inviteDetail04')}}</li>
				<!-- 交易量 -->
				<li class="name">{{$t('inviteDetail06')}}</li>
				<!-- 手续费 -->
				<li>{{$t('inviteDetail07')}}</li>
				<!-- 币种 -->
				<li>{{$t('invite-key58')}}</li>
			</ul>
			<ul class="main" v-if="pageState===2">
				<!-- 账户UID -->
				<li>{{$t('inviteDetail04')}}</li>
				<!-- 入金金额 -->
				<li class="name">{{$t('invite-new04')}}</li>
				<!-- 币种 -->
				<li>{{$t('invite-key58')}}</li>
			</ul>
			<ul class="main" v-if="pageState===3">
				<!-- 账户UID -->
				<li>{{$t('inviteDetail04')}}</li>
				<!-- 出金金额 -->
				<li class="name">{{$t('invite-new03')}}</li>
				<!-- 币种 -->
				<li>{{$t('invite-key58')}}</li>
			</ul>
		</div>
		<div class="content" :class="{noList:list.length===0}">
			<div class="list" :class="{iphoneX:isIphoneX,iphone:isIphone}">
				<van-list
					v-model="loading"
	  				:finished="finished"
	  				:error.sync="loadError"
	  				:offset="offset"
	  				:error-text="$t('loadErr')"
	  				:finished-text="$t('loadFinished')"
	  				@load="load"
				>
					<div class="item" v-for="item of list">
						<li class="one-line">{{item.uid || item.order_uid}}</li>
						<li class="name one-line" v-if="pageState==1">{{item.contract_amount}}</li>
						<li class="name one-line" v-if="pageState==2">{{item.money}}</li>
						<li class="name one-line" v-if="pageState==3">{{item.money}}</li>
						<!-- 今日手续费 -->
						<li v-if="pageState==1" class="one-line">{{item.fee}}</li>
						<!-- 币种 -->
						<li v-if="pageState==1" class="one-line">{{item.currency}}</li>
						<!-- 今日入金 -->
						<li v-if="pageState==2" class="one-line">{{item.currency}}</li>
						<!-- 今日出金 -->
						<li v-if="pageState==3" class="one-line">{{item.currency}}</li>
					</div>
		    		<div class="empty" v-if="list.length===0 && finished">
		    			<p class="img">
		    				<img v-if="themeIndex==0" src="../../static/images/empty2.svg">
		    				<img v-else src="../../static/images/empty2-dark.svg">
		    			</p>
		    			<p class="desc">{{$t('404-No')}}</p>
		    		</div>
				</van-list>
			</div>
		</div>
	</div>
</template>
<script src="./inviteDetail.js"></script>
<style scoped lang="scss">
	@import './inviteDetail.scss';
</style>
<style>
	.content.noList .van-list__finished-text{
		display: none;
	}
</style>